<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { getLoopHoleListApi, getExploitTypeApi, getExploitCvssTypeApi,getExploitVendorApi,getExploitRisklevelApi } from '@/api/search'
import { useSearchPage, type OptionsItem } from '@/hooks/web'
import { useSearch } from '@/hooks/component'
import JmpTimeRange from '@/components/time-range'
import ListCard from './components/listCard.vue'

import operateDrawer from '../components/grammar/index.vue'
import TipsSearchInput from '../components/TipsSearchInput.vue'
import { debounce } from 'lodash-es'

const route = useRoute()
const search: any = ref('')
const keyword:any = ref(route.query.keyword)
const active:any = ref(route.query.active)

const { table, page, ruleForm, getRecords } = useSearchPage(getLoopHoleListApi, keyword.value)
const { handleSearch, advancedRef } = useSearch('advancedRef', ruleForm, getRecords)
const rules = reactive({})
const operateRef = ref()

const options: Recordable<OptionsItem[]> = reactive({
  // 厂商名称下拉
  vendorList:[],
  //危害等级下拉
  riskLevelList:[],
  // CVSS评估下拉
  cvssList: [],
  // 漏洞类型下拉
  loopholeList: [],
  // 是否有PoC下拉
  pocList: [
    { label: '有', value: 1 },
    { label: '无', value: 0 }
  ],
  // 是否有修复方案下拉
  fixList: [
    { label: '有', value: 1 },
    { label: '无', value: 0 }
  ]
})

// 重置
const onReset = () => {
  ruleForm.keyWord = ''
  ruleForm.startTime = ''
  ruleForm.endTime = ''
  ruleForm.vendor = ''
  ruleForm.level = ''
  // ruleForm.cvss = ''
  ruleForm.loopholeTyle = ''
  // ruleForm.poc = ''
  ruleForm.fix = ''
}

//搜索
const handSearch = () => {
  ruleForm.search = search.value.keyword
  handleSearch("search")
}
const getoptions = async () => {
  // 漏洞厂商
  getExploitVendorApi().then((res) => (options.vendorList = res.data.data))
  // 危害等级
  getExploitRisklevelApi().then((res) => (options.riskLevelList = res.data.data))
  // 漏洞类型
  getExploitTypeApi().then((res) => (options.loopholeList = res.data.data))
  // 漏洞CVSS
  // getExploitCvssTypeApi().then((res) => (options.cvssList = res.data.data))
}


const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? options.vendorList.filter((item) => {
        // 以输入词开头
        return item.value.startsWith(queryString)
      })
    : options.vendorList
  cb(results)
}
onMounted(() => {
  search.value.keyword = keyword.value
  getoptions()
})
</script>

<template>
  <div class="jm-container flex-space jm-mainbox">
    <div class="left jm-bg-color">
      <div class="search-container jm-bg-color">
        <jm-form ref="advancedRef" label-width="auto" :model="ruleForm" :rules="rules">
          <jm-form-item prop="keyWord">
            <jm-input v-model="ruleForm.keyWord" placeholder="请输入关键词" maxlength="32" />
          </jm-form-item>

          <jm-form-item label="更新时间" prop="startTime">
            <jmp-time-range
              v-model:startTime="ruleForm.startTime"
              v-model:endTime="ruleForm.endTime"
            />
          </jm-form-item>

          <jm-form-item label="厂商" prop="vendor">
            <jm-autocomplete
              v-model="ruleForm.vendor"
              :fetch-suggestions="debounce(querySearch, 500)"
              clearable
            />
          </jm-form-item>
          <jm-form-item label="危害等级" prop="riskLevel">
            <jmp-select v-model="ruleForm.level" :options="options.riskLevelList" clearable />
          </jm-form-item>
          <!-- <jm-form-item label="CVSS评估" prop="cvss">
            <jmp-select v-model="ruleForm.cvss" :options="options.cvssList" clearable />
          </jm-form-item> -->
          <jm-form-item label="漏洞类型" prop="loopholeTyle">
            <jmp-select v-model="ruleForm.loopholeTyle" :options="options.loopholeList" clearable />
          </jm-form-item>
          <!-- <jm-form-item label="是否有PoC" prop="poc">
            <jmp-select v-model="ruleForm.poc" :options="options.pocList" clearable />
          </jm-form-item> -->
          <jm-form-item label="是否有修复方案" prop="fix">
            <jmp-select v-model="ruleForm.fix" :options="options.fixList" clearable />
          </jm-form-item>
          <el-form-item>
            <div style="text-align: right">
              <jm-button @click="onReset">重置</jm-button>
              <jm-button type="primary" @click="handleSearch('advanced')">查询</jm-button>
            </div>
          </el-form-item>
        </jm-form>
      </div>
    </div>
    <div class="right jm-bg-color">
      <div class="list">
        <!-- 搜索 -->
        <div class="search flex jm-bg-color">
          <TipsSearchInput ref="search" class="tips-search" :active="active" :FieldsList="fieldsList" @keyup.enter="handSearch"/>
          <jm-button type="primary" :icon="Search" @click="handSearch">搜索</jm-button>
          <jm-button type="primary" :icon="Search" @click="operateRef.show()">搜索语法</jm-button>
        </div>
        <!-- 结果 -->
        <div class="list-length">共为你找到 {{ page.total }} 条相关结果</div>
        <jm-divider />
        <div class="list-con" v-for="(item, index) in table.records" :key="item.id">
          <ListCard :info="item" />
          <hr class="line" v-if="index + 1 < table.records.length"/>
        </div>
        <!-- 分页 -->
        <jmp-pagination
          v-model:page="page.pageNum"
          v-model:limit="page.pageSize"
          v-model:total="page.total"
        />
      </div>
    </div>
    <operateDrawer ref="operateRef" />
  </div>
</template>

<style scoped lang="scss">
.line {
  border: 1px solid #e4e7ed;
  margin: 0.3rem 0;
}
.flex-space {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 20%;
  margin-right: 1.25rem;
  .search-container {
    padding: 0.625rem;
  }
}
.right {
  flex: 1;
  padding: 1.875rem;
  .search {
    .tips-search {
      flex: 1;
      margin-right: 0.625rem;
      background: rgb(255 255 255 / 15%);
      border: 1px solid #ffffff;
    }
  }
  .list {
    .list-length {
      margin-top: 1.25rem;
      color: var(--el-color-info);
    }
  }
}
</style>
